﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MainMaster.Master" AutoEventWireup="true"
    CodeBehind="ProductDetail.aspx.cs" Inherits="ZLCMS.Web.Product.ProductDetail" %>

    
<%@ Import Namespace="ZLCMS.Business.Util" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <script src="/js/jquery.bxslider.js"></script>
    <script src="/js/jquery.bxslider.min.js"></script>
    <script src="/js/MagicZoom.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/MagicZoom.css" type="text/css" />
  <script type="text/javascript" src="/js/modal.js"></script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="wrapper">
        <!--上边 start-->
        <div class="details_top">
            <!--左边 start-->
            <div class="details_left">
                <h2>
                    <%= _productInfo.ProductName %></h2>
                <div class="details_text">
                 <%= _productInfo.ShortDesc %>
                </div>
                <div class="details_box" id="div_product_detail">
                    <%--<div class="position">
                        <p>
                            团购</p>
                        <p>
                            <span>代金券</span></p>
                    </div>--%>
                    <div class="left_img">
                        <div id="tsShopContainer">
                            <div id="tsImgS">
                                <a href="<%=firstPhoto %>" title="Images" class="MagicZoom"
                                    id="MagicZoom">
                                    <img class="lazy"  src="/images/loading.gif" data-original="<%=firstPhoto %>" width="384" height="384" /></a></div>
                            <div id="tsPicContainer">
                                <div id="tsImgSArrL" onclick="tsScrollArrLeft()">
                                </div>
                                <div id="tsImgSCon">
                                    <ul>
                                        <asp:Repeater ID="rpt_product_photo" runat="server">
                                            <ItemTemplate>
                                                <li onclick="showPic(<%# Container.ItemIndex %>)" rel="MagicZoom" <%# Container.ItemIndex==0?"class='tsSelectImg'":"" %>>
                                                    <img height="76" width="76" class="lazy"  src="/images/loading.gif" data-original="<%# Eval("FilePath")%>" tsimgs="<%# Eval("FilePath")%>" /></li>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                        <%--  <li onclick="showPic(0)" rel="MagicZoom" class="tsSelectImg"><img height="76" width="76" src="/MemberUser/images/details_maxpic.jpg" tsImgS="/MemberUser/images/details_maxpic.jpg" /></li>--%>
                                      
                                    </ul>
                                </div>
                                <div id="tsImgSArrR" onclick="tsScrollArrRight()">
                                </div>
                            </div>
                            <img class="MagicZoomLoading" width="16" height="16" src="/MemberUser/images/loading.gif"
                                alt="Loading..." />
                        </div>
                        <script src="/js/ShopShow.js"></script>
                    </div>
                    <div class="right_text">
                        <h6>
                            RMB:
                           <font id="span_saleprice"><%= _productInfo.SalePrice%></font> <span id="span_marketprice"><%= _productInfo.MarketPrice%></span></h6>
                        <ul class="ylb">
                            <li>邮费&nbsp;<label><%= _productInfo.ShippingPrice%></label></li>
                            <li>买满&nbsp;<label><%= _productInfo.ShippingThreshold%></label>&nbsp;件包邮<span></span></li>
                            <div class="clear">
                            </div>
                        </ul>
                        <ul class="sys">
                            <li>
                                <p>
                                    <label>
                                        库存</label><a href="#">200</a></p>
                            </li>
                            <li>
                                <p>
                                    <label>
                                        商品评价</label>推荐</p>
                            </li>
                        </ul>
                        <ul class="cn" style=" border-top:none;">
                            <li>
                                <p id="p_skuItem" style=" overflow:auto; zoom:1; margin-bottom:5px;">
                        </p></li>
                        </ul>
                        <ul class="num">
                            <li>
                                <label>
                                    数量</label>
                                <a onclick="reduceQuantity(this)">-</a><input type="text" value="1" name="numBox"
                                    onblur="checkNum(this)" /><a onclick="addQuantity(this)">+</a></li>
                        </ul>
                        
                     <div class="detail_button">
                        <form id="form1" action="/Shopcart/shoppingcartconfirm.aspx?kind=buynow" method="post">
                    	<a href="javascript:void(0);" onclick="addCollect('buynow')" class="buy">立即抢购</a>

                          <input type="hidden" id="hdn_codes" name="products"/>
                        <a href="javascript:void(0);"  class="cart" data-toggle="modal" onclick="addCollect('normal')" >加入购物车</a><div class="clear">
                        </div>
                        <div class="modal" id="forgetform">
                            <a class="close" data-dismiss="modal">×</a>
                            <h1>加入购物车成功！</h1>
                            <a href="ProductList.aspx" class="jixu forgot">继续购物</a><a href="/Shopcart/ShoppingCart.aspx" class="jiesuan forgot">去结算</a>
                        </div>
                        </form>
                    </div>
                        <ul class="sys" style=" margin-top:10px;">
                            <li>
                                <p>
                                    <label>
                                        服务承诺</label><img src="/memberuser/images/fuwu.jpg" /></p>
                            </li>
                        </ul>
                        <%--<div class="djs">
                            <img src="/MemberUser/images/details_timeicon.jpg" width="18" height="15" />
                            仅剩&nbsp;&nbsp;<span class="date">13</span>天&nbsp;&nbsp;<span class="hour">13</span>小时&nbsp;&nbsp;<span
                                class="minutes">13</span>分钟&nbsp;&nbsp;<span class="second">13</span>秒
                        </div>--%>
                        <script type="text/javascript">
                            var startTime = new Date();
                            startTime.setFullYear(2014, 5, 27);
                            startTime.setHours(23);
                            startTime.setMinutes(59);
                            startTime.setSeconds(59);
                            startTime.setMilliseconds(999);
                            var EndTime = startTime.getTime();
                            function GetRTime() {
                                var NowTime = new Date();
                                var nMS = EndTime - NowTime.getTime();
                                var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));
                                var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;
                                var nM = Math.floor(nMS / (1000 * 60)) % 60;
                                var nS = Math.floor(nMS / 1000) % 60;
                                if (nMS < 0) {
                                    $("#dao").hide();
                                    $(".djs").show();
                                } else {
                                    $(".djs").show();
                                    $("#daoend").hide();
                                    $(".date").text(nD);
                                    $(".hour").text(nH);
                                    $(".minutes").text(nM);
                                    $(".second").text(nS);
                                }
                            }

                            $(document).ready(function () {
                                var timer_rt = window.setInterval("GetRTime()", 1000);
                            });
                        </script>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <!--左边 end-->
            <!--右边 start-->
            <div class="details_right">
                <div class="title">
                    <span>热门推荐</span>
                </div>
                <ul class="bxslider">
                   <asp:Repeater ID="rpt_slide1" runat="server">
                        <ItemTemplate>
                            <li><a href="/Product/ProductDetail.aspx?no=<%# Eval("ProductNo") %>">
                                <img  class="lazy" src="/images/loading.gif" data-original="<%# FileKit.FirstFilePath(Eval("ThumbnailImg") as string)+".thumb.jpg"  %>" width="142"
                                    height="142" />
                            </a>
                                <p>
                                    RMB: <span>
                                        <%#Eval("SalePrice") %></span></p>
                                <p class="yuanjia">
                                    原价：<span><%#Eval("MarketPrice") %></span></p>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                
                </ul>
            </div>
            <!--右边 end-->
            <div class="clear">
            </div>
        </div>
        <!--上边 end-->
        <!--下边 start-->
        <div class="details_bottom">
            <!--tabs start-->
            <div class="tab">
                <ul class="menu">
                    <li class="active"><a href="##">商品描述</a></li>
                    <li><a href="##">产品参数</a></li>
                    <li><a href="##">挑选与保养</a></li>
                    <div class=" clear">
                    </div>
                </ul>
                <div class="tab_details con1">
                   <%= _productInfo.Description %>
                </div>
                <div class="tab_details con2">
                     <%= _productInfo.ParamContent %>
                </div>
                <div class="tab_details con3">
                    <%= _productInfo.GiftContent %>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('.tab ul.menu li').click(function () {
                        //获得当前被点击的元素索引值
                        var Index = $(this).index();
                        //给菜单添加选择样式
                        $(this).addClass('active').siblings().removeClass('active');
                        //显示对应的div
                        $('.tab').children('div').eq(Index).show().siblings('div').hide();

                    });
                });
            </script>
            <!--tabs end-->
            <!--右边 start-->
            <div class="bottom_right">
                <a href="<%=AdsKits.LoadSingleAds("PRODUCT_MID_PIC").Url  %>" class="bottom_banner">
                    <img class="lazy"   src="/images/loading.gif" data-original="<%=AdsKits.AdsPic("PRODUCT_MID_PIC") %>" /></a>
               <%-- <div class="bottom_zuij">
                    <div class="title">
                        <span>最近浏览</span>
                    </div>
                    <ul>
                        <asp:Repeater ID="rpt_slide2" runat="server">
                            <ItemTemplate>
                                <li><a href="/Product/ProductDetail.aspx?no=<%#Eval("ProductNo") %>">
                                    <img  class="lazy" src="/images/loading.gif" data-original="<%# FileKit.FirstFilePath(Eval("ThumbnailImg") as string) %>" width="142"
                                        height="142" /></a>
                                    <p>
                                        RMB: <span>
                                            <%#Eval("SalePrice") %></span></p>
                                    <p class="yuanjia">
                                        原价：<span><%#Eval("MarketPrice") %></span></p>
                                </li>
                            </ItemTemplate>
                        </asp:Repeater>
              
                    </ul>
                </div>--%>
            </div>
            <!--右边 end-->
            <div class="clear">
            </div>
        </div>
        <!--下边 end-->
    </div>
    <script type="text/javascript">
        var skuProductList;
        var tempList = [];
        var choosedProduct = null;

        $(document).ready(function(){
  $('.bxslider').bxSlider({
	  mode: 'vertical',
	  minSlides: 3,
	  maxSlides: 4,
	  auto: true,

});
});

        $(function () {
            $("#div_product_detail").ExecuteCommand({
                successCallBack: function (result) {
                    if (result) {
                        $(result).each(function () {
                            this.SkuItems = $.parseJSON(this.ParamCode);
                        });
                        skuProductList = result;

                        var allSkuItems = [];
                        $(skuProductList).each(function () {
                            $(this.SkuItems).each(function () {
                                allSkuItems.push(this);
                            });
                        });

                        var productGroupList = eval('<%= _productInfo.CustomField %>');

                        for (var i = 0; i < productGroupList.length; i++) {

                            var thisItem = productGroupList[i];

                            for (var j = thisItem.Items.length - 1; j >= 0; j--) {
                                var bMatch = false;
                                for (var k = 0; k < allSkuItems.length; k++) {

                                    if (allSkuItems[k].GroupId == thisItem.Group.Id && allSkuItems[k].ItemId == thisItem.Items[j].Id) {
                                        bMatch = true;
                                        break;
                                    }
                                }
                                if (bMatch == false) {
                                    productGroupList[i].Items.splice($.inArray(productGroupList[i].Items[j], productGroupList[i].Items), 1);
                                }
                            }
                        }
                        //  $(productGroupList).each(function () {
                        var skuItemHtml = "";
                        $(productGroupList).each(function () {
                            var groupId = this.Group.Id;
                            skuItemHtml += " <p class='style' groupid='" + groupId + "'><label>" + this.Group.SkuName + "：</label>";
//                            $(this.Items).each(function () {
                           if (this.Items.length > 0) {
                                $(this.Items).each(function () {
                                    skuItemHtml += "<a href='#' selected='' onclick='ClickItem(this)' groupid='" + groupId + "'   itemid='" + this.Id + " '>" + this.ItemName + " </a>";
                                });
                            }
                            else {
                                skuItemHtml += "<label style='color:gray;' >暂无</label>";
                            }
//                            });
                            skuItemHtml += "</p>";
                        });
                        $("#p_skuItem").html(skuItemHtml);

                          if (productGroupList.length == 0 && skuProductList.length > 0) {
                            choosedProduct = skuProductList[0];
                        }
                    }
                },
                errorCallback: function (errorCode, msg) {
                    alert(msg);
                }
            }, 'LoadSkuProductInfo', { ProductNo: '<%=_productInfo.ProductNo%>' });
        });

        function ClickItem(ct) {
            choosedProduct = null;
            $this = $(ct);
            if ($this.hasClass("nocp")) {
                return false;
            }

            $this.parent().find("a").removeClass("select");


            if ($this.attr("choosed") == "1") {
                //$this.removeClass("select");
                $this.attr("choosed", "0");
                $this.parent('p[selectitem]').removeAttr("selectitem");
            }
            else {
                $this.parent().find("a").attr("choosed", "0");
                $this.addClass("select");
                $this.attr("choosed", "1");
                $this.parent().attr("selectItem", $this.attr("itemid"));
            }
            MatchingSkuProduct(ct);
        }

        function MatchingSkuProduct(ct) {

            var itemid = $(ct).attr("itemid");
            var choosedGroups = $(ct).parent().siblings(".style");
            var skuChoosed = [];

            //获取已选sku
            $('#p_skuItem').find('[selectItem]').each(function () {
                var item = {};
                item.GroupId = $(this).attr('groupid');
                item.ItemId = $(this).attr('selectItem');
                skuChoosed.push(item);


            });
            //获取所有已选sku匹配的sku产品列表
            var allMatchProductList = getMatchProductList(skuChoosed);
            var maxSalePrice = 0;
            var minSalePrice = allMatchProductList[0].SalePrice;
            var maxMarketPrice = 0;
            var minMarketPrice = allMatchProductList[0].MarketPrice;
            $(allMatchProductList).each(function () {
                if (allMatchProductList.length > 1) {
                    if (this.SalePrice > maxSalePrice) {
                        maxSalePrice = this.SalePrice;
                    }
                    if (this.SalePrice < minSalePrice) {
                        minSalePrice = this.SalePrice;
                    }
                    if (this.MarketPrice > maxMarketPrice) {
                        maxMarketPrice = this.MarketPrice;
                    }
                    if (this.MarketPrice < minMarketPrice) {
                        minMarketPrice = this.MarketPrice;
                    }
                }
            });
            //设置SKU产品价格
            if (allMatchProductList.length == 1) {
                choosedProduct = allMatchProductList[0];
                $("#span_marketprice").html("￥" + allMatchProductList[0].MarketPrice);
                $("#span_saleprice").html("￥" + allMatchProductList[0].SalePrice);
            }
            else {
                if (minMarketPrice == maxMarketPrice) {
                    $("#span_marketprice").html("￥" + minMarketPrice);
                }
                else {
                    $("#span_marketprice").html("￥" + minMarketPrice + "-" + maxMarketPrice);
                }

                if (minSalePrice == maxSalePrice) {
                    $("#span_saleprice").html("￥" + minSalePrice);
                }
                else {
                    $("#span_saleprice").html("￥" + minSalePrice + "-" + maxSalePrice);
                }
            }


            //设置其他sku分组的可选性
            $('.product_detail').find('p[groupid]:not([groupid= ' + $(ct).attr('groupid') + '])').each(function () {
                var groupid = $(this).attr('groupid');
                $(this).find('a[groupid]').each(function () {
                    var $skuItem = $(this);
                    var sku = {};
                    sku.GroupId = groupid;
                    sku.ItemId = $skuItem.attr('itemid');

                    var bmatch = false;

                    //复制一份选中的sku信息
                    tempArray = copySkuArray(skuChoosed);

                    //将包含本分组的sku信息去除
                    $(tempArray).each(function () {
                        //var skuItem = this;
                        if (this.GroupId == $skuItem.attr('groupid')) {
                            tempArray.splice($.inArray(this, tempArray), 1);
                        }
                    });

                    var matchProductList = getMatchProductList(tempArray);

                    $(matchProductList).each(function () {

                        if (checkProduct(this, sku) == true) {
                            //
                            bmatch = true; // 
                            return false;
                        }
                        else {
                            //
                        }
                    });
                    if (bmatch == true) { $skuItem.removeClass("nocp"); } else { $skuItem.addClass("nocp"); }

                });
            });

        }

        function copySkuArray(skuChoosed) {
            var tempArray = [];
            $(skuChoosed).each(function () {
                var item = {};
                item.GroupId = this.GroupId;
                item.ItemId = this.ItemId;
                tempArray.push(item);
            })
            return tempArray;
        }

        //获取产品包含sku的产品列表
        function getMatchProductList(skuChoosed) {
            var matchProductList = [];
            //设置包含已选sku的productlist
            $(skuProductList).each(function () {
                var product = this;

                var bInsert = true;
                $(skuChoosed).each(function () {
                    //var skuItem = this;
                    if (checkProduct(product, this) == false) {
                        bInsert = false;
                        return false;
                    }
                });

                if (bInsert == true) { matchProductList.push(product); }
            })
            return matchProductList;
        }

        //检查产品是否包含指定的sku
        function checkProduct(product, skuItem) {
            var result = false;
            $(product.SkuItems).each(function () {
                if (this.GroupId == skuItem.GroupId && this.ItemId == skuItem.ItemId) {
                    result = true;
                    return false;
                }
            })
            return result;
        }
        //数量-1
        function reduceQuantity(ct) {
            $("input[name=numBox]").val(parseInt($("input[name=numBox]").val()) - 1);
            if ($("input[name=numBox]").val() == "0") {
                $("input[name=numBox]").val("1");
            }
        }
        //数量+1
        function addQuantity(ct) {
            $("input[name=numBox]").val(parseInt($("input[name=numBox]").val()) + 1);
            if ($("input[name=numBox]").val() == "100") {
                $("input[name=numBox]").val("99");
            }
        }
        //检查数量输入是否正确
        function checkNum(ct) {
            var count = $(ct).val().trim();
            if (isNaN(count) || count == "") {
                $(ct).val("1");
            }
            if (count <= 0) {
                $("input[name=numBox]").val("1");
            }
            if (count >= 100) {
                $("input[name=numBox]").val("99");
            }
        }
        //加入购物车/立即购买
        function addCollect(kind) {
            //判断库存是否满足
           if('<%=_productInfo.Storage %>'=='0')
           {
            alert('对不起，产品库存不足');
                return false;
           }
           if('<%=_skuProductList.Count %>'=='1'&&choosedProduct == null)
           {
           alert('对不起，产品库存不足');
                return false;
           }
            if (choosedProduct == null) {
                alert('请选择产品');
                return false;
            }
             if (choosedProduct.Storage < parseInt($("input[name=numBox]").val())) {
                alert('对不起，产品库存不足');
                return false;
            }
            $("#div_product_detail").ExecuteCommand({
                successCallBack: function (result) {
                    if (kind == "normal") {
                        //显示加入购物车成功对话框  -->继续购物  OR  去结算
                        $("#forgetform").modal({ show: !0 })
                        //                        alert("加入购物车成功!");
                    }
                    else if (kind == "buynow") {
                        var products = [];
                        var product = {};

                        product.ProductSkuCode = choosedProduct.ProductSkuCode;
                        product.ProductNo = choosedProduct.ProductNo;
                        product.Quantity = $("input[name=numBox]").val();
                        product.Items = choosedProduct.ParamCode;

                        products.push(product);
                        $("#hdn_codes").val(JSON.stringify(products));
                        if (choosedProduct != null) {
                            $("#form1").submit();
                        }
                        else {
                            alert('请选择需要结算的商品');
                        }
                    }
                },
                errorCallback: function (errorCode, msg) {
                    alert(msg);
                    if (errorCode == "0109") {
                        setTimeout(function () {
                            location.href = "/MemberUser/Login.aspx";
                        }, 2000);
                    }
                }
            }, 'AddShoppingCartProduct', { ProductNo: choosedProduct.ProductNo, Quantity: $("input[name=numBox]").val(), OpenId: '<%=Request["openid"] %>', ProductSkuCode: choosedProduct.ProductSkuCode, Kind: kind, ParamCode: choosedProduct.ParamCode });
        }
    </script>
   
</asp:Content>
